import React, {useContext, useState} from 'react';
import classes from "./Cart.module.css"
import IconImage from "../../asset/bag.png"
import TestComponents from "../../store/testContext"
import CartDetail from "./CartDetail/CartDetail";
import CheckOut from "./CheckOut/CheckOut";


const Cart = () => {
    const ctx = useContext(TestComponents)
    const [isShow, setIsShow] = useState(false);
    const [showCheckOut, setShowCheckOut] = useState(false);
    const ClickHandler = () => {
        if(ctx.cartData.totalAmount===0) return
        setIsShow(!isShow);
    }
    const BtnClickHandler = () => {
        if(ctx.cartData.totalAmount===0) return
        setShowCheckOut(!showCheckOut)
    }
    const foxClickHandler = () => {
        setShowCheckOut(false)
    }
    return (

        <div className={classes.Card} onClick={ClickHandler}>

            { showCheckOut  && <CheckOut foxClick={foxClickHandler}></CheckOut> }
            {
                isShow && ctx.cartData.totalAmount !==0 ? <CartDetail onClick={ClickHandler}></CartDetail>: ''
            }
            <div className={classes.Icon}>
                <img className={classes.IconImage} src={IconImage} alt=""/>
                {ctx.cartData.totalAmount > 0 ? <span className={classes.TotalAmount}>{ctx.cartData.totalAmount}</span> :null }
            </div>

            {ctx.cartData.totalAmount === 0 ? <p className={classes.noMeal}>未选购商品</p> : <p className={classes.Price}>{ctx.cartData.totalPrice}</p>}

            <button className={`${classes.Button} ${ctx.cartData.totalAmount === 0? classes.noSelect :''}`} onClick={BtnClickHandler}>去结算</button>

        </div>
    );
};

export default Cart;